<template>
  <div class="bannerCont">
    <el-carousel :interval="5000" type="card" height="220px" trigger="click">
      <el-carousel-item
        v-for="item in banners"
        :key="item.bannerId"
        height="220px"
      >
        <div class="bannerPic">
          <img :src="item.imageUrl" style="width: 540px; height: 220px" />
          <div
            class="bannerTitle"
            :style="{
              backgroundColor:
                item.titleColor === 'red'
                  ? 'rgb(204,74,74)'
                  : 'rgb(74,121,204)',
            }"
          >
            {{ item.typeTitle }}
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
  <div class="recommendSection songListSection">
    <div class="sectionTitle">
      推荐歌单 <el-button @click="updateUseSong">updateSongList</el-button>
    </div>
    <div class="sectionContent">
      <div class="songListCard" v-for="song in songListTop" :key="song.id">
        <MusicSquareCard :song="song" @on-play="gotoSongSheet(song.id)" />
      </div>
    </div>
    <div class="sectionContent">
      <div class="songListCard" v-for="song in songListBottom" :key="song.id">
        <MusicSquareCard :song="song" @on-play="gotoSongSheet(song.id)" />
      </div>
    </div>
  </div>

  <div class="recommendSection">
    <div class="sectionTitle">独家放送</div>
    <div class="sectionContent">
      <BroadCastCard
        v-for="item in homePrivateContent"
        :key="item.id"
        class-name="broadcastItem"
        :data="item"
      />
    </div>
  </div>

  <div class="recommendSection newSongsSection">
    <div class="sectionTitle">最新音乐</div>
    <div class="sectionContent">
      <div v-for="item in newSongs" :key="item.id" class="newSongsItem">
        <HomeNewSongItem :song="item" />
      </div>
    </div>
  </div>

  <div class="recommendSection mvSection">
    <div class="sectionTitle">推荐MV</div>
    <div class="sectionContent">
      <div v-for="item in MVList" :key="item.id" class="mvItem">
        <MVCard :mv="item" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBanner } from "@/api/index";
import { onMounted, reactive, ref, toRefs } from "vue";
import { Banner, SongList } from "@/types/index";
import useCommonStore from "@/stores/common";
import { useRouter } from "vue-router";

import MusicSquareCard from "@/components/MusicSquareCard/MusicSquareCard.vue";
import BroadCastCard from "@/components/common/BroadCastCard.vue";
import HomeNewSongItem from "@/components/common/HomeNewSongItem.vue";
import MVCard from "@/components/common/MvCard.vue";

import {
  useHomeRecommendSongList,
  usePrivateContent,
  useRecommendNewSongs,
  useHomeMV,
} from "../../../../hooks/commonQueryHook";

const commonStore = useCommonStore();
const router = useRouter();
const banners = ref<Banner[]>([]);
const { songListTop, songListBottom, updateUseSong } =
  useHomeRecommendSongList();
const { homePrivateContent } = usePrivateContent();

const { newSongs, updateUseNewSongs } = useRecommendNewSongs();

const { MVList, UpdateMVList } = useHomeMV();

const gotoSongSheet = (id: number) => {
  commonStore.setAlbumPageId(id);
  router.push({
    name: "albumAndSongSheet",
  });
};

onMounted(() => {
  getBanner().then((res) => {
    if (res.code === 200) {
      banners.value = res.banners;
    }
  });

  updateUseSong();
  updateUseNewSongs(12);
  UpdateMVList();
});
</script>

<style scoped lang="less">
.bannerCont {
  height: 220px;
  .bannerPic {
    overflow: hidden;
    position: relative;
    height: 220px;
    width: 540px;
    border-radius: 6px;
    .bannerTitle {
      width: 70px;
      height: 22px;
      position: absolute;
      right: 0;
      bottom: 0;
      display: flex;
      align-items: center;
      color: #fff;
      justify-content: center;
      border-radius: 6px 0 6px 0;
      font-size: 12px;
    }
  }
}

.recommendSection {
  margin-top: 20px;
  .sectionTitle {
    color: rgb(54, 54, 54);
    margin-bottom: 10px;
    font-weight: bold;
    font-size: 18px;
  }
}

.mvSection {
  .mvItem {
    margin-right: 20px;
    flex: 1;
    &:last-child {
      margin-right: 0;
    }
  }
}
.newSongsSection {
  .sectionContent {
    flex-wrap: wrap;
  }
  .newSongsItem {
    width: calc((100% - 24px) / 3);
    margin-bottom: 16px;
    margin-right: 12px;
    &:nth-child(3n) {
      margin-right: 0;
    }
  }
}

.songListSection {
  width: 100%;
}
.sectionContent {
  margin-bottom: 20px;
  display: flex;
  width: 100%;
  .songListCard {
    flex: 1;
    cursor: pointer;
    margin-right: 20px;
    &:last-child {
      margin-right: 0;
    }

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.broadcastItem {
  flex: 1;
  margin-right: 20px;
  &:last-child {
    margin-right: 0;
  }
}
</style>
